<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="shortcut icon"  th:href="@{/static/favicon.ico}"/>

    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>






<!-- 示例-970 -->
<!--<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>-->

<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">-->
<!--    <legend>赋值和取值</legend>-->
<!--</fieldset>-->

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>订票台账录入</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="/management/submitbooking" method="post">

    <div class="layui-form-item">
        <label class="layui-form-label">初始站</label>
        <div class="layui-input-block">
            <input type="text" name="departure" lay-verify="title" autocomplete="off" placeholder="请输入车站，机场等位置信息" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">终点站</label>
        <div class="layui-input-block">
            <input type="text" name="endCity" lay-verify="title" autocomplete="off"  class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">出发时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="timefind" placeholder="yyyy-MM-dd HH:mm:ss" name="departureTime">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">到站时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="timefind2" placeholder="yyyy-MM-dd HH:mm:ss" name="endTime">
            </div>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">工具类型</label>
        <div class="layui-input-inline">
            <select name="transportTypeId">
                <option value="1" selected="">飞机</option>
                <option value="2">汽车</option>
                <option value="3">火车</option>
                <option value="4">高铁</option>
                <option value="5">轮船</option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="transportSeatClassId">
                <option value="1">坐席等级</option>
                <option value="2">一等座/头等舱</option>
                <option value="3">二等座/公务舱</option>
                <option value="4">无座/商务舱</option>
            </select>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车次/航班</label>
        <div class="layui-input-inline">
            <input type="text" name="transportNumber" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属出行人</label>
        <div class="layui-input-inline">
            <select name="travelPeopleId">
                <option th:each="travelPeople:${travelPeoples}" th:value="${travelPeople.staff.id}" th:text="${travelPeople.staff.name}"></option>
            </select>
        </div>

    </div>z
    <div class="layui-form-item">
        <label class="layui-form-label">车票价格</label>
        <div class="layui-input-inline">
            <input type="text" name="price" lay-verify="number" placeholder="￥" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <input type="submit" class="layui-btn" lay-submit="" lay-filter="demo2">
    </div>
</form>





<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
//日期时间选择器
        laydate.render({
            elem: '#timefind'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#timefind2'
            ,type: 'datetime'
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });


        //监听指定开关
        form.on('switch(switchTest)', function(data){
            layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            $.ajax({
                url:'/management/submitbooking',
                data:data.field,
                success:function(){
                    layer.msg('提交成功');
                   // window.location = '/business-trip/table-applications';
                },
            })
            //return false;
        });



        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>
</body>
</html>